<template>
  <vxe-modal title="新建资源" v-model="showCreateResource" width="600" height="530"
             :before-hide-method="beforeHideMethod">
    <template>
      <el-form :model="resourceForm" :rules="resourceRules" ref="resourceForm" label-width="83px">
        <el-form-item label="资源名称" prop="resourceName">
          <el-input maxlength="50" show-word-limit v-model="resourceForm.resourceName"></el-input>
        </el-form-item>
        <el-form-item label="覆盖范围" prop="coverage">
          <el-radio-group v-model="resourceForm.coverage">
            <el-radio v-for="item of coverage" :label="item['dictKey']">{{ item.dictValue }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="开放规则" prop="visitRestriction">
          <el-radio-group v-model="resourceForm.visitRestriction">
            <el-radio v-for="item of visitRestriction" :label="item['dictKey']">{{ item.dictValue }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="封面展示">
          <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" alt=""/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="资源描述">
          <el-input type="textarea" maxlength="1000" show-word-limit v-model="resourceForm.resourceDescribe"></el-input>
        </el-form-item>
        <el-form-item>
          <el-row>
            <el-col :span="12" :offset="6">
              <el-button @click="beforeHideMethod" size="small">取消</el-button>
              <el-button type="primary" size="small" @click="save">立即创建</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </template>
  </vxe-modal>
</template>

<script>
/**
 * {创建资源}
 *
 * @author: 宋康
 * @date: 2023/2/3
 */
import {saveResourceItem} from '@/api/resources-center/service/index.js'

export default {
  name: "CreateResource",
  props: {
    resourceType: {
      type: Number,
      required: true
    },
    isShow: {
      type: Boolean,
      required: true
    },
    visitRestriction: {
      type: Array,
      default: () => {
        return []
      }
    },
    coverage: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data() {
    return {
      showCreateResource: false,
      imageUrl: '',
      imageFile: null,
      resourceForm: {
        "resourceName": "",
        "resourceDescribe": "",
        "resourceType": '',
        "coverage": "1",
        "visitRestriction": "3"
      },
      resourceRules: {
        resourceName: [
          {required: true, message: '请输入资源名称', trigger: 'blur'},
          {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
        ],
        coverage: [
          {required: true, message: '请选择覆盖范围', trigger: 'change'}
        ],
        visitRestriction: [
          {required: true, message: '请选择开放规则', trigger: 'change'}
        ]
      }
    }
  },
  methods: {
    /**
     * {封面文件改变时触发}
     *
     * @author: 宋康
     * @date: 2023/2/6
     */
    beforeAvatarUpload(file, fileList) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.imageFile = file;
    },
    /**
     * {模态窗口关闭事件}
     *
     * @author: 宋康
     * @date: 2023/2/3
     */
    beforeHideMethod() {
      this.$emit('update:isShow', false);
    },
    /**
     * {保存}
     *
     * @author: 宋康
     * @date: 2023/2/3
     */
    save() {
      this.$refs['resourceForm'].validate((valid) => {
        if (valid) {
          let formData = new FormData();
          formData.append('resourceName', this.resourceForm.resourceName);
          formData.append('resourceDescribe', this.resourceForm.resourceDescribe);
          formData.append('resourceType', this.resourceType);
          formData.append('coverage', this.resourceForm.coverage);
          formData.append('visitRestriction', this.resourceForm.visitRestriction);
          if (this.imageFile) {
            formData.append('file', this.imageFile.raw);
          }
          this._debounce(() => saveResourceItem(formData).then(res => {
            if (res.status) {
              this.$message.success('资源已创建');
              this.beforeHideMethod();
              this.$emit("on-success", res.data);
              this.$XModal.confirm('资源创建成功，是否继续配置资源？').then(type => {
                if ('confirm' === type) {
                  this._routerPushName('MapServiceEdit', {resourceId: res.data});
                }
              })
            } else {
              this.$message.error(res.msg);
            }
          }), 500)
        } else {
          return false;
        }
      });
    }
  },
  watch: {
    isShow(n) {
      this.showCreateResource = n
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.avatar-uploader {
  &:deep(.el-upload ) {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    &:hover {
      border-color: #409EFF;
    }
  }

  &:deep(.avatar-uploader-icon) {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  &:deep(.avatar) {
    width: 100px;
    height: 100px;
    display: block;
  }
}
</style>